<template>
  <div style="padding: 0 15px;">
    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              商品类别
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="$router.push('/category/add')"
            >添加商品类别</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="divider" />

      <el-row :gutter="15" class="whererow">
        <el-col :span="4" style="line-height: 32px">通过类别名称搜索</el-col>
        <el-col :span="6">
          <el-input
            v-model="search"
            type="text"
            size="small"
            placeholder="请输入类别名称"
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-col>
      </el-row>
    </div>

    <div class="noticerow box">
      <i class="el-icon-edit" /> &nbsp; 已选择了0项
    </div>

    <el-table
      ref="multipleTable"
      border
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column align="center" label="编号" width="60" type="index" />
      <el-table-column align="center" label="类别名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="级别" width="100">
        <template slot-scope="scope">{{ scope.row.depth }}</template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="60">
        <template slot-scope="scope">{{ scope.row.sort }}</template>
      </el-table-column>
      <el-table-column align="center" label="是否启用" width="140">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            :active-value="1"
            :inactive-value="0"
            active-color="#1aa"
            inactive-color="#aaa"
            @change="changeActiveState(scope.row.id, scope.row.enable)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否显示在导航栏" width="140">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isDisplay"
            :active-value="1"
            :inactive-value="0"
            active-color="#1aa"
            inactive-color="#aaa"
            @change="changeDisplayState(scope.row.id, scope.row.isDisplay)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="设置" width="150">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isParent"
            title="查看下级"
            size="mini"
            icon="el-icon-folder-opened"
            :disabled="scope.row.parent == 0"
            @click="$router.push({name: 'Category', params: {parentId: scope.row.id}})"
          >查看下级</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button
            title="编辑"
            type="warning"
            size="mini"
            icon="el-icon-edit"
            circle
            @click="$router.push({ name: 'EditCategory', params: {id: scope.row.id}})"
          />
          <el-button
            v-if="! scope.row.isParent"
            title="删除"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            circle
            @click="deleteItem(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as api from '@/api/category'
export default {
  data() {
    return {
      search: '', // 用于绑定类别名称搜索框的值
      tableData: [],
      multipleSelection: []
    }
  },
  /** 生命周期方法 页面挂在完毕后执行 */
  mounted() {
    // 加载当前福类别下的类别列表
    let parentId = this.$route.params.parentId
    // 如果是查看全部，重定向到0类别下
    if (parentId === ':parentId') {
      // 解决从模板带来的bug, 传递了参数 :parentId
      parentId = 0
      this.$router.push({ name: 'Category', params: { parentId: 0 }})
      return
    }
    console.log('查看分类，parentId:', parentId)
    if (parentId === undefined) {
      parentId = 0
    }
    // 加载0类别下的内容  （一级类别）
    this.loadCategoryList(parentId)
  },
  methods: {

    /** 通过类别id删除类别 */
    deleteItem(index, category) {
      this.$confirm('确认删除该类别?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 选择确认，执行删除业务
        api.deleteCategory(category.id).then((res) => {
          console.log('通过id删除类别：', res)
          // 删除成功，重建缓存后 重新加载品牌列表
          // return this.categoryApi.rebuildCache()
          return true
        }).then(res => {
          const parentId = this.$route.params.parentId
          this.loadCategoryList(parentId)
        })
      })
    },

    /** 通过开关 修改类别状态 是否启用 */
    changeActiveState(id, enable) {
      console.log('修改类别导航栏激活状态', `id:${id} enable:${enable}`)
      if (enable) {
        // 修改为激活状态
        api.enableCategory(id).then((res) => {
          this.$message({
            showClose: true,
            message: '更新该类别为启用状态，已生效',
            type: 'success'
          })
          // 重建缓存后 回首页
          // this.categoryApi.rebuildCache()
        })
      } else {
        api.disableCategory(id).then((res) => {
          this.$message({
            showClose: true,
            message: '更新该类别为禁用状态，已生效',
            type: 'warning'
          })
          // 重建缓存后 回首页
          // this.categoryApi.rebuildCache()
        })
      }
    },

    /** 通过开关 修改类别显示状态 */
    changeDisplayState(id, isDisplay) {
      console.log('修改类别显示状态', `id:${id} display:${isDisplay}`)
      if (isDisplay) {
        // 修改为激活状态
        api.displayCategory(id).then((res) => {
          this.$message({
            showClose: true,
            message: '更新该类别为隐藏状态，已生效',
            type: 'warning'
          })
          // 重建缓存后 回首页
          // this.categoryApi.rebuildCache()
        })
      } else {
        api.hideCategory(id).then((res) => {
          this.$message({
            showClose: true,
            message: '更新该类别为显示状态，已生效',
            type: 'success'
          })
          // 重建缓存后 回首页
          // this.categoryApi.rebuildCache()
        })
      }
    },

    handleSortChange(a, b) {
      return a.price - b.price
    },

    /**
     *  加载类别列表
     *  @param parentId 父类别ID
     */
    loadCategoryList(parentId) {
      // 整理请求参数
      // const params = {
      //   parentId: parentId,
      //   page: this.currentPage,
      //   pageSize: this.pageSize
      // }
      // this.categoryApi.queryByParent(params).then((res) => {
      //   console.log('加载类别列表：', res)
      //   this.tableData = res.data.data
      // })
      if (parentId === undefined) parentId = 0
      api.queryByParentId(parentId).then((res) => {
        console.log('加载类别列表：', res)
        this.tableData = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
